<template>
  <el-table
    style="width: 100%"
    :data="tableData"
    border
    @header-dragend="
      (currenWidth, oldWidth, el) => {
        onHeaderDragend(currenWidth, oldWidth, el, 'table');
      }
    "
  >
    <el-table-column
      v-for="(colItem, index) in tableColumn"
      :key="index"
      :prop="colItem.prop"
      :label="colItem.label"
      :width="colItem.width"
    >
    </el-table-column>
  </el-table>
</template>

<script>
import tableWidthMin from "./tableWidthMin";

export default {
  mixins: [tableWidthMin],
  data() {
    return {
      tableColumn: [
        {
          prop: "date",
          label: "日期",
          width: "auto",
        },
        {
          prop: "name",
          label: "姓名",
          width: "auto",
        },
        {
          prop: "address",
          label: "地址",
          width: "auto",
        },
      ],

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.initTableWidth(this.tableColumn, "table");
  },
};
</script>

<style scoped></style>
